import React from "react";
import "./TodoMain.css";

export default function TodoMain(props) {
  //获取 todos 所有的任务数据
  let { todos, checkTodo, removeTodo } = props;

  //声明一个函数移除任务
  let remove = (id) => {
    return () => {
      //执行 removeTodo 的函数 删除任务
      removeTodo(id);
    };
  };

  return (
    <ul className="todo-main">
      {todos.map((item) => {
        return (
          <li key={item.id}>
            <label>
              <input
                type="checkbox"
                checked={item.done}
                // 为 input 元素绑定 onChange 事件
                onChange={(e) => {
                  //调用 checkTodo 函数
                  checkTodo(item.id, e.target.checked);
                }}
              />
              <span className={item.done ? "done" : ""}>{item.title}</span>
            </label>
            <button className="btn btn-danger" onClick={remove(item.id)}>
              删除
            </button>
          </li>
        );
      })}
      {todos.length === 0 && <li className="empty">暂无数据</li>}
      
    </ul>
  );
}
